<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="test">
    <Msg></Msg>
    <hr>
    <Msg></Msg>
  </div>

  <script>

    /* 
      msg1 = new Msg()
      对象: msg1._data = Msg.options.data
      函数: msg1._data = Msg.options.data()
      msg2 new Msg()
      对象: msg2._data = Msg.options.data
      函数: msg2._data = Msg.options.data()
    组件的data为什么不能是对象?
      如果data配置是对象 => 这个组件多个实例共享同一个data对象, 一旦一个组件对象的数据更新, 多个界面都会更新
      如果data配置是函数 => 这个组件的多个实例都有自己data对象, 各自更新各自的
    */


    // 定义组件
    const Msg = Vue.extend({
      // data: {msg: 'abc'},  // 组件的data配置不能对象, 只能返回对象的函数
      data () {
        return {
          msg: 'abc'
        }
      },
      template: `
        <div>
          <p>{{msg}}</p>
          <button @click='update'>更新</button>
        </div>
      `,
      methods: {
        update () {
          this.msg += '--'
        }
      },
    })

    new Vue({
      el: '#test',
      data: {

      },
      // 注册组件: 局部注册
      components: {
        Msg
      }
    })

  </script>
</body>
</html>